<template>
	<view style="border-top: 20rpx solid #F4F6F8;">
		<view class="info-input-list">
			<view class="info-input-item d-flex-jsb">
				<div class="info-input-l">群聊名称</div>
				<div class="info-input-r d-flex">
					<input type="text" v-model="group_name" placeholder="取一个好名字很重要" value="" />
					<image src="../../static/house/ico-right.png" style="width: 16rpx;" class="right-icon" mode="widthFix"></image>
				</div>
			</view>
			<view class="info-input-item d-flex-jsb">
				<div class="info-input-l">设置密码</div>
				<div class="info-input-r d-flex">
					<view class="d-flex" @click="setIsPublic(1)" style="margin-right: 86rpx;">
						<text>是</text>
						<image class="radio" :src="is_public ? '/static/pages/selecy-icon.png' : '../../static/house/check.png'" mode="widthFix"></image>
					</view>
					<view class="d-flex" @click="setIsPublic(0)" style="margin-right: 30rpx;">
						<text>否</text>
						<image class="radio" :src="!is_public ? '/static/pages/selecy-icon.png' : '../../static/house/check.png'" mode="widthFix"></image>
					</view>
					<image src="../../static/house/ico-right.png" style="width: 16rpx;" class="right-icon" mode="widthFix"></image>
				</div>
			</view>
			<view class="upload-pic">
				<view class="upload-title">群聊头像<text>（不必填）</text></view>
				<view class="upload-icon" @click="image">
					<!-- <image src="" mode="widthFix"></image> -->
					<image  mode="widthFix"  :src="imgUrl" ></image>
				</view>
				<!-- <view @click="choosePic" class="preview-image" v-else>
					<image :src="group_image" mode="widthFix"></image>
				</view> -->
			</view>
		</view>
		<view class="submit-btns">
			<view @click="submitInfo">创建群聊</view>
		</view>
		<view class="cover" v-show="showPasswordSet">
			<view class="password-content">
				<view class="dialog-title">设置密码</view>
				<view class="dialog-content">
					<view>设置密码后生成二维码分享给好友加入群聊.</view>
					<input type="text" v-model="password" placeholder="输入你的密码">
				</view>

				<view class="dialog-btn d-flex">
					<view class="b1" @click="cancelSet">取消</view>
					<view @click="submit">确认</view>
				</view>
			</view>
		</view>
		<image-cropper :crop-fixed="true" :src="url" @confirm="confirm" @cancel="cancel"></image-cropper>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				password: "",
				showPasswordSet: false,
				user: null,
				group_name: "",
				is_public: 0,
				imgUrl:"../../static/house/upload.png",
				isPassword: true,
				group_image: "http://c.voofan.com/storage/2020-12-20/5fdf5bd9dbcf3.png",
				submitStatus: true,
				url:'',
				locationInfo:''
			}
		},
		created() {
			this.user = JSON.parse(uni.getStorageSync('userInfo'));
			this.locationInfo = uni.getStorageSync('locationInfo');
			// console.log(this.user)
			// console.log(this.locationInfo)
		},
		methods: {
			choosePic() {
				uni.chooseImage({
					success: res => {
						this.uploadInfo(res.tempFilePaths[0])
					}
				})
			},
			image() {
				let that = this
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						that.url = tempFilePaths[0]
				    }
				});
			},
			
			cancelSet() {
				this.showPasswordSet = false
			},

			uploadInfo(file) {
				uni.uploadFile({
					url: 'http://c.voofan.com/api/upload',
					method: 'POST',
					formData: {
						file: file
					},
					filePath: file,
					name: 'file',
					success: res => {
						debugger
						let data = JSON.parse(res.data);
						this.group_image = data.data;
					}
				})
			},

			setIsPublic(val) {
				this.is_public = val;
			},

			submit() {
				if (this.submitStatus) {
					this.submitStatus = false;
				} else {
					return;
				}
				uni.showLoading({
					title: '加载中'
				})
				let parmes = {
					group_name: this.group_name,
					group_image: this.group_image,
					is_public: this.is_public,
					password: this.password,
					longitude: this.locationInfo.longitude,
					latitude: this.locationInfo.latitude
				}
				// console.log(parmes);
				this.$utils.postrequest("/api/tim/create_group", parmes, res => {
					this.submitStatus = true;
					// console.log(res)
					if (res.code == 200) {
						uni.hideLoading()
						uni.showToast({
							title: '创建成功',
						})
						setTimeout(_ => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			createImGroup() {
				// 创建好友工作群
				let promise = this.tim.createGroup({
					type: this.$TIM.TYPES.GRP_PUBLIC,
					name: this.group_name,
					// memberList: [{
					// 	userID: this.user.id,
					// }] // 如果填写了 memberList，则必须填写 userID
				});
				promise.then(function(imResponse) { // 创建成功
					// console.log(imResponse.data.group); // 创建的群的资料
					uni.hideLoading()
					uni.showToast({
						title: '创建成功',
					})
					setTimeout(_ => {
						uni.navigateBack({
							delta: 1
						})
					}, 1000)
				}).catch(function(imError) {
					uni.hideLoading()
					console.warn('createGroup error:', imError); // 创建群组失败的相关信息
				});
			},


			submitInfo() {
				if (!this.group_name) {
					uni.showToast({
						title: '请填写群聊名称',
						icon: 'none'
					})
					return;
				}

				if (this.is_public) {
					this.showPasswordSet = true;
					return
				}

				
				this.submit();
			},
			confirm(e) {
				this.url = ''
				this.imgUrl = e.detail.tempFilePath
				uni.uploadFile({
				    url: this.$utils.domain+'/api/upload', //仅为示例，非真实的接口地址
				    filePath:this.imgUrl,
				    name: 'file',
				    success: (res) => {
						if(res.statusCode==200){
							this.avatar = []
							let ress=JSON.parse(res.data)
							if(ress.code==200){
								this.imgUrl = ress.data
								this.group_image = ress.data
								this.avatar.push(ress.data)
								// console.log('res',ress.data)
							}
						}
				    }
				});
			},
			cancel() {
				this.url = ''
			}
		}
	}
</script>

<style>
	image {
		width: auto;
		height: auto;
		display: block;
	}

	.d-flex {
		display: flex;
		align-items: center;
	}

	.d-flex-jsb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.info-input-list {
		padding: 0 30rpx;
	}

	.info-input-item {
		height: 110rpx;
		color: #888;
		line-height: 110rpx;
		border-bottom: 1px solid #eee;
	}

	.info-input-item input {
		text-align: right;
		margin-right: 30rpx;
	}

	.right-icon {
		width: 16rpx;
	}

	.radio {
		width: 34rpx;
		margin-left: 14rpx;
	}

	.upload-title text {
		color: #888;
		font-size: 26rpx;
	}

	.upload-pic {
		margin-top: 30rpx;
	}

	.upload-icon {
		margin-top: 30rpx;
	}

	.upload-icon image {
		width: 198rpx;
	}

	.submit-btns {
		position: fixed;
		bottom: 45rpx;
		padding: 0 30rpx;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.submit-btns view {
		height: 104rpx;
		background: #6ac7fc;
		box-shadow: 0px 3rpx 9rpx 0px rgba(117, 100, 254, 0.19);
		border-radius: 52rpx;
		text-align: center;
		line-height: 104rpx;
		color: #fff;
	}

	.preview-image {
		margin-top: 30rpx;
		float: left;
		padding: 30rpx;
		border-radius: 5px;
		border: 1px solid #ddd;
	}

	.preview-image image {
		width: 138rpx;
	}

	.cover {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .5);
	}

	.password-content {
		width: 541rpx;
		height: 358rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
	}

	.dialog-btn {
		margin-top: 22rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-top: 1px solid #DFE3E7;
	}

	.dialog-btn view {
		width: 50%;
		color: #6ac7fc;
	}

	.b1 {
		border-right: 1px solid #DFE3E7;
	}

	.dialog-content {
		padding: 0 33rpx;
		font-size: 26rpx;
	}

	.dialog-content view {
		padding: 10rpx 20rpx;
	}

	.dialog-title {
		margin-top: 37rpx;
	}

	.dialog-content input {
		text-align: left;
		width: 476rpx;
		height: 58rpx;
		background: #FAFAFA;
		border: 1px solid #DFE3E7;
		border-radius: 5px;
		margin-top: 14rpx;
	}
	.img {
		width: 135rpx;
		height: 135rpx;
		margin: 80rpx 0rpx 0rpx 220rpx;
		border-radius: 50%;
	}
</style>
